<template>
    <div class="left_wrap">
        <div class="left_menu rel">
            <ul>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(0)" :class="{ 'menu_active': 0==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>首页</a>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(1)" :class="{ 'menu_active': 1==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>外卖
                    </a>
                    <div class="submenu ba_f color_3" v-if="1==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">外卖</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">订单概况</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">今日概况</a></li>
                                    <p class="submenu_con_tit color_9">订单管理</p>
                                    <li><a href="#" class="submenu_a wid">订单处理</a></li>
                                    <li><a href="#" class="submenu_a wid">订单查询</a></li>
                                    <li><a href="#" class="submenu_a wid">快捷订单</a></li>
                                    <p class="submenu_con_tit color_9">外卖设置</p>
                                    <li><a href="#" class="submenu_a wid">订单提醒</a></li>
                                    <li><a href="#" class="submenu_a wid">订单设置</a></li>
                                    <li><a href="#" class="submenu_a wid">售后说明</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(2)" :class="{ 'menu_active': 2==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>堂食
                    </a>
                    <div class="submenu ba_f color_3" v-if="2==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">堂食</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">订单概况</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">今日概况</a></li>
                                    <p class="submenu_con_tit color_9">订单管理</p>
                                    <li><a href="#" class="submenu_a wid">订单处理</a></li>
                                    <li><a href="#" class="submenu_a wid">订单查询</a></li>
                                    <li><a href="#" class="submenu_a wid">快捷订单</a></li>
                                    <p class="submenu_con_tit color_9">外卖设置</p>
                                    <li><a href="#" class="submenu_a wid">订单提醒</a></li>
                                    <li><a href="#" class="submenu_a wid">订单设置</a></li>
                                    <li><a href="#" class="submenu_a wid">售后说明</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(3)" :class="{ 'menu_active': 3==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>商品
                    </a>
                    <div class="submenu ba_f color_3" v-if="3==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">商品</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">商品管理</p>
                                    <li><router-link to="/good" class="submenu_a submenu_active wid">商品管理</router-link></li>
                                    <li><a href="#" class="submenu_a wid">商品分组</a></li>
                                    <p class="submenu_con_tit color_9">商品属性</p>
                                    <li><a href="#" class="submenu_a wid">商品规格</a></li>
                                    <li><a href="#" class="submenu_a wid">商品属性</a></li>
                                    <li><a href="#" class="submenu_a wid">商品加料</a></li>
                                    <li><a href="#" class="submenu_a wid">商品单位</a></li>
                                    <p class="submenu_con_tit color_9">商品导入</p>
                                    <li><a href="#" class="submenu_a wid">批量上传</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(4)" :class="{ 'menu_active': 4==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>客户
                    </a>
                    <div class="submenu ba_f color_3" v-if="4==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">客户</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">客户管理</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">客户概况</a></li>
                                    <li><a href="#" class="submenu_a wid">客户列表</a></li>
                                    <li><a href="#" class="submenu_a wid">标签管理</a></li>
                                    <li><a href="#" class="submenu_a wid">用户导入</a></li>
                                    <p class="submenu_con_tit color_9">会员管理</p>
                                    <li><a href="#" class="submenu_a wid">等级管理</a></li>
                                    <li><a href="#" class="submenu_a wid">任务管理</a></li>
                                    <p class="submenu_con_tit color_9">储值管理</p>
                                    <li><a href="#" class="submenu_a wid">储值规则</a></li>
                                    <p class="submenu_con_tit color_9">消息推送</p>
                                    <li><a href="#" class="submenu_a wid">消息推送</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(5)" :class="{ 'menu_active': 5==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>财务
                    </a>
                    <div class="submenu ba_f color_3" v-if="5==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">财务</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">资产总览</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">资产总览</a></li>
                                    <li><a href="#" class="submenu_a wid">营业报表</a></li>
                                    <p class="submenu_con_tit color_9">资金对账</p>
                                    <li><a href="#" class="submenu_a wid">对账单</a></li>
                                    <li><a href="#" class="submenu_a wid">对账明细</a></li>
                                    <p class="submenu_con_tit color_9">退款记录</p>
                                    <li><a href="#" class="submenu_a wid">退款记录</a></li>
                                    <p class="submenu_con_tit color_9">提现管理</p>
                                    <li><a href="#" class="submenu_a wid">提现概况</a></li>
                                    <li><a href="#" class="submenu_a wid">提现列表</a></li>
                                    <p class="submenu_con_tit color_9">其他</p>
                                    <li><a href="#" class="submenu_a wid">积分明细</a></li>
                                    <li><a href="#" class="submenu_a wid">余额明细</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(6)" :class="{ 'menu_active': 6==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>店铺
                    </a>
                    <div class="submenu ba_f color_3" v-if="6==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">店铺</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">店铺管理</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">小程序装修</a></li>
                                    <li><a href="#" class="submenu_a wid">公众号装修</a></li>
                                    <p class="submenu_con_tit color_9">店铺主题</p>
                                    <li><a href="#" class="submenu_a wid">店铺风格</a></li>
                                    <li><a href="#" class="submenu_a wid">店铺模板</a></li>
                                    <p class="submenu_con_tit color_9">渠道管理</p>
                                    <li><a href="#" class="submenu_a wid">微信</a></li>
                                    <li><a href="#" class="submenu_a wid">百度</a></li>
                                    <li><a href="#" class="submenu_a wid">支付宝</a></li>
                                    <li><a href="#" class="submenu_a wid">抖音</a></li>
                                    <p class="submenu_con_tit color_9">内容创作</p>
                                    <li><a href="#" class="submenu_a wid">微页面</a></li>
                                    <li><a href="#" class="submenu_a wid">自定义页面</a></li>
                                    <li><a href="#" class="submenu_a wid">悬浮窗</a></li>
                                    <li><a href="#" class="submenu_a wid">公告广告</a></li>
                                    <p class="submenu_con_tit color_9">其他设置</p>
                                    <li><a href="#" class="submenu_a wid">装修设置</a></li>
                                    <li><a href="#" class="submenu_a wid">素材中心</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>

                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(7)" :class="{ 'menu_active': 7==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>数据
                    </a>
                    <div class="submenu ba_f color_3" v-if="7==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">数据</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">数据中心</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">数据概况</a></li>
                                    <li><a href="#" class="submenu_a wid">实时分析</a></li>
                                    <p class="submenu_con_tit color_9">流量分析</p>
                                    <li><a href="#" class="submenu_a wid">流量概况</a></li>
                                    <li><a href="#" class="submenu_a wid">页面分析</a></li>
                                    <p class="submenu_con_tit color_9">商品分析</p>
                                    <li><a href="#" class="submenu_a wid">商品概况</a></li>
                                    <li><a href="#" class="submenu_a wid">商品排行</a></li>
                                    <p class="submenu_con_tit color_9">交易分析</p>
                                    <li><a href="#" class="submenu_a wid">交易概况</a></li>
                                    <li><a href="#" class="submenu_a wid">渠道分析</a></li>
                                    <p class="submenu_con_tit color_9">客户分析</p>
                                    <li><a href="#" class="submenu_a wid">客户概况</a></li>
                                    <li><a href="#" class="submenu_a wid">会员分析</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>

                <li>
                    <a href="#" class="menu_a wid mar_t40" @click="showToggle(8)"
                       :class="{ 'menu_active': 8==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>设置
                    </a>
                    <div class="submenu ba_f color_3" v-if="8==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">设置</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">店铺设置</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">店铺信息</a></li>
                                    <li><a href="#" class="submenu_a wid">自提地址</a></li>
                                    <p class="submenu_con_tit color_9">基础设置</p>
                                    <li><a href="#" class="submenu_a wid">平台设置</a></li>
                                    <li><a href="#" class="submenu_a wid">平台模式</a></li>
                                    <li><a href="#" class="submenu_a wid">支付设置</a></li>
                                    <p class="submenu_con_tit color_9">权限设置</p>
                                    <li><a href="#" class="submenu_a wid">员工管理</a></li>
                                    <li><a href="#" class="submenu_a wid">角色管理</a></li>
                                    <li><a href="#" class="submenu_a wid">操作日志</a></li>
                                    <p class="submenu_con_tit color_9">消息提醒</p>
                                    <li><a href="#" class="submenu_a wid">小票设置</a></li>
                                    <li><a href="#" class="submenu_a wid">短信设置</a></li>
                                    <li><a href="#" class="submenu_a wid">模板消息</a></li>
                                    <p class="submenu_con_tit color_9">其他设置</p>
                                    <li><a href="#" class="submenu_a wid">评价标签</a></li>
                                    <li><a href="#" class="submenu_a wid">公告管理</a></li>
                                    <li><a href="#" class="submenu_a wid">广告管理</a></li>
                                    <li><a href="#" class="submenu_a wid">帮助中心</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(9)" :class="{ 'menu_active': 9==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>应用
                    </a>
                    <div class="submenu ba_f color_3" v-if="9==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">应用</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">数据中心</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">数据概况</a></li>
                                    <li><a href="#" class="submenu_a wid">实时分析</a></li>
                                    <p class="submenu_con_tit color_9">流量分析</p>
                                    <li><a href="#" class="submenu_a wid">流量概况</a></li>
                                    <li><a href="#" class="submenu_a wid">页面分析</a></li>
                                    <p class="submenu_con_tit color_9">商品分析</p>
                                    <li><a href="#" class="submenu_a wid">商品概况</a></li>
                                    <li><a href="#" class="submenu_a wid">商品排行</a></li>
                                    <p class="submenu_con_tit color_9">交易分析</p>
                                    <li><a href="#" class="submenu_a wid">交易概况</a></li>
                                    <li><a href="#" class="submenu_a wid">渠道分析</a></li>
                                    <p class="submenu_con_tit color_9">客户分析</p>
                                    <li><a href="#" class="submenu_a wid">客户概况</a></li>
                                    <li><a href="#" class="submenu_a wid">会员分析</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(10)" :class="{ 'menu_active': 10==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>渠道
                    </a>
                    <div class="submenu ba_f color_3" v-if="10==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">渠道</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">数据中心</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">数据概况</a></li>
                                    <li><a href="#" class="submenu_a wid">实时分析</a></li>
                                    <p class="submenu_con_tit color_9">流量分析</p>
                                    <li><a href="#" class="submenu_a wid">流量概况</a></li>
                                    <li><a href="#" class="submenu_a wid">页面分析</a></li>
                                    <p class="submenu_con_tit color_9">商品分析</p>
                                    <li><a href="#" class="submenu_a wid">商品概况</a></li>
                                    <li><a href="#" class="submenu_a wid">商品排行</a></li>
                                    <p class="submenu_con_tit color_9">交易分析</p>
                                    <li><a href="#" class="submenu_a wid">交易概况</a></li>
                                    <li><a href="#" class="submenu_a wid">渠道分析</a></li>
                                    <p class="submenu_con_tit color_9">客户分析</p>
                                    <li><a href="#" class="submenu_a wid">客户概况</a></li>
                                    <li><a href="#" class="submenu_a wid">会员分析</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
                <li>
                    <a href="#" class="menu_a wid" @click="showToggle(11)" :class="{ 'menu_active': 11==menuCurrent}">
                        <span class="mar_r10 iconfont iconshanghu"></span>权限
                    </a>
                    <div class="submenu ba_f color_3" v-if="11==menuCurrent">
                        <el-scrollbar>
                            <div style="max-height: calc(100vh - 64px)">
                                <p class="submenu_tit fon_16 wei maincolor">权限</p>
                                <ul class="submenu_con fon_14">
                                    <p class="submenu_con_tit color_9">应用管理</p>
                                    <li><a href="#" class="submenu_a submenu_active wid">应用管理</a></li>
                                    <p class="submenu_con_tit color_9">授权管理</p>
                                    <li><a href="#" class="submenu_a wid">授权详情</a></li>
                                    <li><a href="#" class="submenu_a wid">更新日志</a></li>
                                    <p class="submenu_con_tit color_9">其他</p>
                                    <li><a href="#" class="submenu_a wid">超级权限</a></li>
                                </ul>
                            </div>
                        </el-scrollbar>
                    </div>
                </li>
            </ul>
        </div>
        <!--    <a-->
        <!--      :class="[style.item, i === selectIndex ? style.active : '' ]"-->
        <!--      class="row-center"-->
        <!--      v-for="(item, i) in list"-->
        <!--      :key="i"-->
        <!--      @click.stop="handleClick(i)"-->
        <!--      >-->
        <!--      <div :class="style.icon"></div>-->
        <!--      -->
        <!--      <div :class="style.text">fsaf</div>-->
        <!--    </a>-->


    </div>
</template>

<script>
    export default {
        name: "LeftNav",
        created() {
            this.menuCurrent = localStorage.getItem('menuCurrent')?localStorage.getItem('menuCurrent'):0
        },
        data() {
            return {
                menuCurrent: 0,
                isIndex: '',
            }
        },
        methods: {
            // handleClick(index) {
            //     this.selectIndex = index
            // },
            showToggle(index) {
                localStorage.setItem('menuCurrent', index)
                this.menuCurrent = index
                switch (index) {
                    case 0:
                        this.$router.push({path: '/'})
                        break;
                    case 1:
                        break;
                    case 2:
                        break;
                    case 3:
                        this.$router.push({path: '/good'})
                        break;
                }
            },
        }
    };
</script>
<style lang="scss">
    .left_wrap {
        position: fixed;
        left: 0;
        top: 64px;
        width: 300px;
        height: 100%;
        color: #fff;
        font-size: 14px;
        /*padding-top: 10px;*/
        /*overflow-y: scroll;*/
        .left_menu {
            height: 100%;
            width: 120px;
            background: #393836;

            .menu_a {
                color: #fff;
                display: inline-block;
                padding: 15px 0;

                .iconfont {
                    margin-top: 2px;
                }
            }

            .menu_active {
                color: #FD5500;
            }

        }

    }

    .submenu {
        height: 100%;
        position: fixed;
        z-index: -100 !important;
        top: 64px;
        left: 120px;
        width: 130px;
        border-right: 1px solid #eee;

        .submenu_tit {
            line-height: 48px;
        }

        .submenu_con {
            .submenu_con_tit {
                line-height: 48px;
            }

            .submenu_a {
                display: inline-block;
                padding: 11px 0;
            }

            .submenu_active, .submenu_a:hover {
                background: #F2F5FC;
            }
        }
    }
</style>